$(function () {
    initArtCateList()

    function initArtCateList() {
        axios({
            url:'/my/article/cates',
            method:'get',
        }).then(res=>{
            //成功回调
            console.log(res)
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>${ele.Id}</td>
                <td>${ele.name}</td>
                <td>${ele.alias}</td>
                <td>
                    <button data-id ="${ele.Id}" class="btn-edit layui-btn layui-btn layui-btn-xs">编辑</button>
                    <button data-id ="${ele.Id}" class="del-edit layui-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
              </tr>
                `)
            });
            $('tbody').empty().html(arr.join(''))
        });
    }
    let indexAdd = 0
    $('#addBtn').on('click', function () {
        indexAdd = layer.open({
            type: 1, 
            title :'添加分类',
            area: ['500px', '300px'],
            content: '传入任意的文本或html' ,
            content: `
            <form id="addForm" class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
        </form>
            `
          });
    })
    $('body').on('submit', '#addForm', function (e) {
        e.preventDefault()
        axios({
            url:'/my/article/addcates',
            method:'post',
            data: $(this).serialize(),
        }).then(res=>{
            //成功回调
            console.log(res)
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            layer.msg('恭喜你添加成功')
            initArtCateList()
            layer.close(indexAdd)
        });
    })
  let indexEdit = 0
  $('tbody').on('click', '.btn-edit', function () {
    indexEdit = layer.open({
      type: 1, 
      title :'修改文章分类',
      area: ['500px', '300px'],
      content: '传入任意的文本或html' ,
      content: `
      <form id="editForm" class="layui-form" lay-filter="editForm">
      <input type="hidden" name="Id">
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
  </form>
      `
    })
    let id = $(this).attr('data-id')
    // alert(id)
      axios({
        url:'/my/article/cates/' + id,
        method:'get',
      }).then(res=>{
        //成功回调
        // console.log(res)
        if (res.data.status !== 0) {
          return layer.msg(res.data.message)
        }
        layui.form.val('editForm',res.data.data)
      });
  })
  // 修改文章
  $('body').on('submit', '#editForm', function (e) {
    e.preventDefault()
    axios({
      url:'/my/article/updatecate',
      method:'post',
      data:$(this).serialize(),
    }).then(res=>{
      //成功回调
      // console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.msg('修改文章分类成功')
      initArtCateList()
      layer.close(indexEdit)
    });
  })
  // 删除功能
  $('tbody').on('click', '.del-edit', function () {
    let id = $(this).attr('data-id')
    // alert(id)
    layer.confirm('你确定要删除吗?', {icon: 3, title:'提示'}, function(index){
      //do something
      axios({
        url:'/my/article/deletecate/'+ id
      }).then(res=>{
        //成功回调
        console.log(res)
        if (res.data.status !== 0) {
          return layer.msg(res.data.message)
        }
        layer.msg('恭喜你,删除文章类别成功!')
        initArtCateList()
      });
      layer.close(index);
    });
  })
})